<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>终端日志</title>
    <meta name="ctx" th:content="${#httpServletRequest.getContextPath()}"/>
    <link rel="stylesheet" th:href="@{/css/admin/base-v2.css}">
    <link rel="stylesheet" th:href="@{/lib/font-awesome/4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/lib/flatpickr/flatpickr.min.css}">
    <link rel="stylesheet" th:href="@{/css/admin/app.css}">
    <!--<link rel="stylesheet" th:href="@{/lib/daterangepicker/daterangepicker.css}">-->
    <style>

        .popup-device-log-info .body{
            max-width: 500px;
        }
        .device-log-info{
            margin-bottom: 10px;
            overflow-y: auto;
            max-height: 330px;
        }
        .device-log-info a{
            padding: 10px;
            border-bottom: 1px solid #ddd;
            display: block;
            color: #108ee9;
        }

        .popup-device-log-info .z-btn-group{
            margin-left:10px;
        }
    </style>
</head>

<body>
<div class="app-page">

    <div class="app-page-content">

        <div class="app-card">
            <div class="app-card-body">
                <div class="app-card-body-con">
                    <!-- 过滤器 -->
                    <form class="filter">
                        <input type="hidden" id="deviceCode" name="deviceCode">
                        <div class="filter-group">
                            <div class="filter-item">
                                <div class=" form-item row">
                                    <div class="label"><label>更新开始时间</label></div>
                                    <div class="flex1">
                                        <input type="text" placeholder="开始时间" name="startTime" class="fp-time" th:value="${startTime}">
                                    </div>
                                </div>
                            </div>
                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="label"><label>更新结束时间</label></div>
                                    <div class="flex1">
                                        <input type="text" placeholder="结束时间" name="endTime" class="fp-time" th:value="${endTime}">
                                    </div>
                                </div>
                            </div>
                            <div class="filter-item">
                                <div class="form-item row">
                                   <div class="label"><label>日志类型</label></div>
                                   <div class="flex1">
                                        <div class="areaSelect area-item">
                                            <select name="logType" required>
                                                <option value="ALL">全部</option>
                                                <option value="crash">崩溃日志</option>
                                                <option value="run">运行日志</option>
                                                <option value="play">播放日志</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="filter-item">
                                <button class="z-btn z-primary">查询</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="app-card">
            <div class="app-card-body">
                <div class="app-card-body-con">

                    <table class="z-table">
                        <thead>
	                        <th>名称</th>
	                        <th>日志类型</th>
	                        <th>上传时间</th>
	                        <th>操作</th>
                        </thead>
                        <tbody>
	                        <tr th:each="log: ${list}">
	                            <td th:text="${log.logName}"></td>
	                            <td th:text="${log.logTypeDesc}"></td>
	                            <td th:text="${log.createTimeDesc}"></td>
	                            <td class="btn-group">
	                                <a th:attr="url=${log.logURL}" class="device-log">下载查看</a>
	                            </td>
	                        </tr>
                        </tbody>
                    </table>

	                <!-- 分页信息 -->
	                <div class="app-card-body">
	                    <!-- 前端分页 -->
	                    <div class="pagination z-pat z-fr"></div>
	                </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 日志url -->
    <div class="popup-device-log-info popup-default z-popup z-fixed z-df z-flex-cc z-hide">
        <div class="bg"></div>
        <div class="body">
            <div class="title">日志信息</div>
            <div class="device-log-info">
            </div>
            <div class="z-btn-group">
                <a class="z-btn z-default" data-popup-close>取消</a>
            </div>
        </div>
    </div>

</div>
<script th:src="@{/lib/jquery.min.js}"></script>
<script th:src="@{/lib/layer-v3.1.1/layer/layer.js}"></script>
<script th:src="@{/js/popup.js}"></script>
<script th:src="@{/js/form.js}"></script>
<script th:src="@{/js/admin/app.js}"></script>
<script th:src="@{/js/pagination.js}"></script>
<script th:src="@{/lib/flatpickr/flatpickr.js}"></script>
<script th:src="@{/lib/flatpickr/zh.js}"></script>
<script th:src="@{/js/prompt.js}"></script>

<script>
	//获取context path
	var context = $("meta[name='ctx']").attr("content");
	
    // 从URL加载搜索数据
    $(".filter").formLoad(App.query);
	
 	//处理分页
    var pageNum = [[${pageNum}]];
    var pageSize = [[${pageSize}]];
    var total = [[${total}]];
    
    // 后台渲染分页 - 补全url参数(后台传参可以忽略)
    $(".z-page a").each(function () {
        $(this).attr("href", $(this).attr("href") + location.search)
    });

    $(function () {
        initDatePicker()
    })

    function initDatePicker() {
        flatpickr.localize(flatpickr.l10ns.zh); // 设置为中文
        flatpickr(".fp-time", {
            // mode: "range",
            // 否启用时间选择
            enableTime: true,
            // 选择器中是否可以选择秒
            enableSeconds: true,
            time_24hr: true,
            dateFormat: 'Y-m-d H:i:S',
        });
    }

    var pagination = new Pagination(".pagination", {
        pageIndex: pageNum, // 当前页数
        pageSize: pageSize, // 每页数量
        count: total, // 总条数
        maxButtonCount: 5, // 分页按钮数量(可选)
        // 分页切换事件
        onPageChanged: function (pageIndex) {
            var url = context + "/deviceInfo/deviceLogList";
            var paramStr = createParamStr(pageIndex, pageSize);
            if(paramStr !== ""){
                paramStr = paramStr.substring(1);
                url = url + "?" + paramStr;
            }
            window.location.href = url;
        }
    });
    
    /**
     * 创建参数字符串
     * @param pageIndex 当前页
     * @param pageSize 每页条数
     * @returns {string} 参数字符串
     */
    function createParamStr(pageIndex, pageSize) {
        var startTime = $("input[name='startTime']").val();
        var endTime = $("input[name='endTime']").val();
        var logTypeSelect = $("select[name='logType']").val();
        var deviceCode=$("input[name='deviceCode']").val();
        var url = "";
        if(!isBlank(pageIndex)){
            url = url + "&pageNum=" + pageIndex;
        }
        if(!isBlank(pageSize)){
            url = url + "&pageSize=" + pageSize;
        }
        if(!isBlank(startTime)){
            url = url + "&startTime=" + startTime;
        }
        if(!isBlank(endTime)){
            url = url + "&endTime=" + endTime;
        }
        if(!isBlank(logTypeSelect)){
            url = url + "&logType=" + logTypeSelect;
        }
        if(!isBlank(deviceCode)){
            url = url + "&deviceCode=" + deviceCode;
        }
        return url;
    }
    
   	 //检查参数
     function isBlank(param) {
         if(undefined === param){
             return true;
         }
         if(null == param){
             return true;
         }
         if("" === param){
             return true;
         }
         return false;
     }


    // 日志信息列表 - 弹窗打开
    $('.device-log').click(function () {
        var url = $(this).attr("url");
        if(isBlank(url)){
            popup.tipsTop('日志文件已删除或不存在', 'warning');
            return;
        }
        var urlArr = url.split(",");
        if(urlArr.length > 0){
            var html = '';
            for (var i = 0; i < urlArr.length; i++){
                html += '<a target="_blank"  href="'+context+'/huawei/obs/read?url=' +urlArr[i]+'">'+urlArr[i]+'</a>';
            }
            $('.device-log-info').html(html);
        }
        popup.open('.popup-device-log-info');
    })
</script>
</body>
</html>